<template>
  <div id="container">
    <Nav
      class="nav"
      :changeShadow="changeShadow"
    ></Nav>
    <div
      class="center"
      id="center"
    >
    <div class="scroll">
      <Item
        class="item"
        v-for="item in page.data"
        :key="item.title"
        :info="item"
      ></Item>
      </div>
    </div>
      
    <div class="level is-mobile bottom-nav" style="margin-bottom:0;">
      <a
        href="#"
        @click="nextPage"
        class="level-left"
        style="margin:0 20px;"
      >点击翻页</a>
      <a
        href="#"
        @click="startAutoLoadMode"
        class="level-right"
        style="margin:0 20px;"
      >自动翻页</a>

    </div>

    <div id="waiting">
      加载中，请稍后......
    </div>

    <div
      class="shadow"
      v-if="showShadow"
    ></div>
  </div>

</template>

<script>
import Nav from "./components/Nav.vue";
import Item from "./components/Item.vue";
import Vue from "vue";
export default {
  name: "MainPage",
  components: {
    Nav,
    Item
  },
  data: function() {
    let data = [];
    for (let i = 0; i < 30; i++) {
      var haveImg = false;
      var imgUrl = "";
      if (i % 3 == 0) {
        haveImg = true;
        imgUrl =
          "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1543221029845&di=df7ef797dd57df9f2aabe580f6333f47&imgtype=0&src=http%3A%2F%2Fi1.hdslb.com%2Fbfs%2Farchive%2F1dddf1250d58398b143aaf06c28a9b06ad62d00b.png";
      }
      data.push({
        title: "对传统工资条说不！帮你实现一键发送工资条" + i,
        content:
          "盈薪薪：告别打印、剪裁、发放等复杂步骤，Excel工资单自动生成工资条，一键发送，随时可撤回修改，不怕出错，省时省力更便捷！",
        approveNum: 1000 + i * 100,
        commentNum: 500 + i * 10,
        haveImg: haveImg,
        imgUrl: imgUrl
      });
    }
    return {
      data: data,
      loading:false,
      loadMoreing:true,
      showShadow:false,
      page: {
        totalCount: 0,
        totalPageNum: 0,
        pageSize: 10,
        pageNum: 1,
        data: []
      }
    };
  },
  mounted: function() {
    this.page.totalCount = this.data.length;
    let totalCount = this.page.totalCount;
    let temp = totalCount % this.page.pageSize;
    let pageNum = parseInt(totalCount / this.page.pageSize);
    if (temp > 0) {
      pageNum++;
    } else if (temp < 0) {
      pageNum = 1;
    }
    this.page.totalPageNum = pageNum;
    this.getPageData();
    this.setPullToRefresh();
  },

  methods: {
    startAutoLoadMode:function(){
      window.addEventListener("scroll",this.scrollFn);
    },
    scrollFn: function() {
      //真实内容的高度
      let pageHeight = Math.max(
        document.body.scrollHeight,
        document.body.offsetHeight
      );
      //视窗的高度
      let viewportHeight =
        window.innerHeight ||
        document.documentElement.clientHeight ||
        document.body.clientHeight ||
        0;
      //隐藏的高度
      let scrollHeight =
        window.pageXOffset ||
        document.documentElement.scrollTop ||
        document.body.scrollTop || 
        0;
      let pos = pageHeight - viewportHeight - scrollHeight;

      if(pos<20){
        this.autoNextPage();
      }
    },
    autoNextPage:function(){
        if(this.page.pageNum == this.page.totalPageNum){
          this.loadMoreing = false;
        }
        if(this.loading){
          return;
        }
        this.loading = true;
        this.page.pageNum++;
        let scrollHeight = document.body.scrollHeight;
        setTimeout(()=>{
          this.getPageData();
          this.loading = false;
          Vue.nextTick(function(){
            document.documentElement.scrollTop = scrollHeight;
          })
        },100);
    },
    nextPage: function() {
      this.page.pageNum++;
      let scrollHeight = document.body.scrollHeight;
      this.getPageData();
      Vue.nextTick(function() {
        document.documentElement.scrollTop = scrollHeight;
      });
    },
    getPageData: function() {
      let start = this.page.pageSize * (this.page.pageNum - 1);
      let end = start + this.page.pageSize;
      if (end > this.page.totalCount) {
        end = this.page.totalCount;
      }
      const curPageData = this.data.slice(start, end);
      this.page.data = this.page.data.concat(curPageData);
    },
    refresh: function() {
      //显示等待页面
      var center = document.getElementById("center");
      center.style.display = "none";

      var waiting = document.getElementById("waiting");
      waiting.style.display = "block";

      //模拟拉取数据
      let data = [];
      for (let i = 30; i < 60; i++) {
        var haveImg = false;
        var imgUrl = "";
        if (i % 3 == 0) {
          haveImg = true;
          imgUrl =
            "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1543221029845&di=df7ef797dd57df9f2aabe580f6333f47&imgtype=0&src=http%3A%2F%2Fi1.hdslb.com%2Fbfs%2Farchive%2F1dddf1250d58398b143aaf06c28a9b06ad62d00b.png";
        }
        data.push({
          title: "对传统工资条说不！帮你实现一键发送工资条" + i,
          content:
            "盈薪薪：告别打印、剪裁、发放等复杂步骤，Excel工资单自动生成工资条，一键发送，随时可撤回修改，不怕出错，省时省力更便捷！",
          approveNum: 1000 + i * 100,
          commentNum: 500 + i * 10,
          haveImg: haveImg,
          imgUrl: imgUrl
        });
      }
      this.data = data;
      //显示新界面
      window.setTimeout(this.showNewPage, 2000);
    },
    showNewPage: function() {
      this.page.pageNum = 1;
      this.page.data = [];
      this.getPageData();
      var center = document.getElementById("center");
      center.style.display = "block";

      var waiting = document.getElementById("waiting");
      waiting.style.display = "none";
    },
    changeShadow:function(isShow){
        this.showShadow = isShow;
    },
    setPullToRefresh:function(){
      var scroll = document.querySelector('.scroll');
      var outerScroller = document.querySelector('.center');
      var touchStart = 0;
      // var touchDis = 0;
      outerScroller.addEventListener('touchstart', function(event) {
          var touch = event.targetTouches[0];
          // 把元素放在手指所在的位置
          touchStart = touch.pageY;
      
      }, false);
      outerScroller.addEventListener('touchmove', function(event) {
          var touch = event.targetTouches[0];
          scroll.style.top = scroll.offsetTop + touch.pageY-touchStart + 'px';
          touchStart = touch.pageY;
          // touchDis = touch.pageY-touchStart;
      }, false);
      var that = this;
      outerScroller.addEventListener('touchend', function() {
          touchStart = 0;
          var top = scroll.offsetTop;
      if(top>35) that.refresh();
          if(top>0){
              var time = setInterval(function(){
                  scroll.style.top = scroll.offsetTop -2+'px';
                  if(scroll.offsetTop<=0)clearInterval(time);
              },1)
          }
      }, false);
    
      }
    }
};
</script>

<style>
.nav {
  position: fixed;
  top: 0;
  left: 0;
  height: 53px;
  z-index: 10;
  right: 0;
  background: #fff;
}
.center {
  position: relative;
  margin-top: 53px;
  background: rgb(246, 246, 246);
}
.scroll{
  position :absolute;
  top: 0;
  width: 100%;
}
.item {
  margin-bottom: 10px;
}
#waiting {
  display: none;
  position: absolute;
  top: 53px;
  bottom: 0;
  left: 0;
  right: 0;
  text-align: center;
  line-height: 430px;
}
.shadow{
  position: absolute;
  width: 100%;
  top: 0;
  bottom: 0;
  background: rgb(105, 105, 105,0.65);
}
.bottom-nav{
  position: fixed;
    bottom: 0;
    width: 100%;
    height: 50px;
    background: #eee;
}
</style>
